<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Navigation from '@/components/Navigation.vue'

import {
  Mail,
  Phone,
  MapPin,
  Clock,
  Send,
  CheckCircle,
  AlertCircle,
  MessageSquare,
  User,
  Building
} from 'lucide-vue-next'
import AOS from 'aos'
import 'aos/dist/aos.css'

// 表单数据
interface ContactForm {
  name: string
  email: string
  company: string
  phone: string
  subject: string
  message: string
  budget: string
  timeline: string
}

const form = reactive<ContactForm>({
  name: '',
  email: '',
  company: '',
  phone: '',
  subject: '',
  message: '',
  budget: '',
  timeline: ''
})

// 表单状态
const isSubmitting = ref(false)
const submitStatus = ref<'idle' | 'success' | 'error'>('idle')
const submitMessage = ref('')

// 联系信息
const contactInfo = [
  {
    icon: Mail,
    title: '邮箱地址',
    content: 'hello@firefly-studio.com',
    description: '我们会在24小时内回复您的邮件',
    link: 'mailto:hello@firefly-studio.com'
  },
  {
    icon: Phone,
    title: '联系电话',
    content: '+86 138-0013-8000',
    description: '工作时间：周一至周五 9:00-18:00',
    link: 'tel:+8613800138000'
  },
  {
    icon: MapPin,
    title: '工作地址',
    content: '北京市朝阳区望京SOHO',
    description: '欢迎预约到访，我们为您准备咖啡',
    link: '#'
  },
  {
    icon: Clock,
    title: '工作时间',
    content: '周一至周五 9:00-18:00',
    description: '节假日我们也会及时回复消息',
    link: '#'
  }
]

// 项目预算选项
const budgetOptions = ['5万以下', '5-10万', '10-20万', '20-50万', '50万以上', '待商议']

// 项目周期选项
const timelineOptions = ['1个月内', '1-3个月', '3-6个月', '6个月以上', '待商议']

// 常见问题
const faqs = [
  {
    question: '你们的服务流程是怎样的？',
    answer:
      '我们的服务流程包括：需求分析 → 方案设计 → 开发实施 → 测试优化 → 上线部署 → 后期维护。每个阶段都会与客户保持密切沟通，确保项目按时按质完成。'
  },
  {
    question: '项目开发周期一般需要多长时间？',
    answer:
      '项目周期取决于具体需求和复杂度。简单的展示网站通常需要2-4周，复杂的Web应用可能需要2-6个月。我们会在需求分析阶段给出详细的时间规划。'
  },
  {
    question: '你们提供后期维护服务吗？',
    answer:
      '是的，我们提供完善的后期维护服务，包括bug修复、功能更新、安全维护等。我们有不同的维护套餐可供选择，确保您的项目长期稳定运行。'
  },
  {
    question: '如何保证项目质量？',
    answer:
      '我们有严格的质量控制流程：代码审查、自动化测试、用户体验测试、性能优化等。每个项目都会经过多轮测试，确保交付的产品达到最高标准。'
  }
]

// 提交表单
const submitForm = async () => {
  // 表单验证
  if (!form.name || !form.email || !form.message) {
    submitStatus.value = 'error'
    submitMessage.value = '请填写必填字段'
    return
  }

  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(form.email)) {
    submitStatus.value = 'error'
    submitMessage.value = '请输入有效的邮箱地址'
    return
  }

  isSubmitting.value = true
  submitStatus.value = 'idle'

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 这里应该调用实际的API
    console.log('提交表单数据:', form)

    submitStatus.value = 'success'
    submitMessage.value = '感谢您的留言！我们会在24小时内与您联系。'

    // 重置表单
    Object.keys(form).forEach(key => {
      form[key as keyof ContactForm] = ''
    })
  } catch (error) {
    submitStatus.value = 'error'
    submitMessage.value = '提交失败，请稍后重试或直接联系我们。'
  } finally {
    isSubmitting.value = false
  }
}

// 重置提交状态
const resetSubmitStatus = () => {
  submitStatus.value = 'idle'
  submitMessage.value = ''
}

onMounted(() => {
  // 初始化AOS动画库
  AOS.init({
    duration: 800,
    easing: 'ease-out-cubic',
    once: true,
    offset: 100
  })
})
</script>

<template>
  <div
    class="min-h-screen relative bg-white dark:bg-black text-gray-900 dark:text-white transition-colors duration-300"
  >
    <!-- 导航栏 -->
    <Navigation />

    <!-- 页面头部 -->
    <section
      class="pt-24 pb-12 bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 dark:from-black dark:via-gray-900 dark:to-black relative overflow-hidden"
    >
      <!-- 科技感背景装饰 -->
      <div class="absolute inset-0 bg-cyber-grid opacity-10" />
      <div
        class="absolute top-10 left-10 w-32 h-32 bg-primary-400/20 rounded-full blur-3xl animate-pulse-slow"
      />
      <div
        class="absolute bottom-10 right-10 w-40 h-40 bg-accent-400/20 rounded-full blur-3xl animate-float"
      />
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div data-aos="fade-up">
          <h1 class="text-4xl lg:text-6xl font-bold mb-6">
            联系
            <span class="gradient-text">火叶工作室</span>
          </h1>
          <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            让我们一起探讨您的项目需求，为您的数字化转型点燃创新的火花
          </p>
        </div>
      </div>
    </section>

    <!-- 联系信息 -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
          <div
            v-for="(info, index) in contactInfo"
            :key="info.title"
            class="group text-center"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div
              class="bg-white/80 dark:bg-gray-900/50 p-8 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-primary-400/50 transition-all duration-300 hover:transform hover:scale-105 backdrop-blur-sm shadow-lg hover:shadow-xl glow-effect"
            >
              <div
                class="inline-flex items-center justify-center w-16 h-16 bg-primary-400/20 rounded-full mb-6 group-hover:bg-primary-400/30 transition-colors"
              >
                <component
                  :is="info.icon"
                  class="w-8 h-8 text-primary-500"
                />
              </div>
              <h3 class="text-xl font-bold mb-3 group-hover:text-primary-500 transition-colors">
                {{ info.title }}
              </h3>
              <p class="text-lg font-medium mb-2">
                <a
                  v-if="info.link !== '#'"
                  :href="info.link"
                  class="hover:text-primary-500 transition-colors"
                >
                  {{ info.content }}
                </a>
                <span v-else>{{ info.content }}</span>
              </p>
              <p class="text-gray-500 dark:text-gray-400 text-sm">
                {{ info.description }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单和地图 -->
    <section class="py-20 bg-gray-100/50 dark:bg-gray-900/30 backdrop-blur-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-16">
          <!-- 联系表单 -->
          <div data-aos="fade-right">
            <div
              class="bg-white/80 dark:bg-gray-900/50 p-8 rounded-2xl border border-gray-200 dark:border-gray-800 backdrop-blur-sm shadow-lg"
            >
              <div class="flex items-center gap-3 mb-8">
                <MessageSquare class="w-8 h-8 text-primary-500" />
                <h2 class="text-3xl font-bold">
                  发送
                  <span class="gradient-text">消息</span>
                </h2>
              </div>

              <!-- 提交状态提示 -->
              <div
                v-if="submitStatus !== 'idle'"
                :class="[
                  'flex items-center gap-3 p-4 rounded-lg mb-6',
                  submitStatus === 'success'
                    ? 'bg-primary-400/20 border border-primary-400/30'
                    : 'bg-red-400/20 border border-red-400/30'
                ]"
              >
                <CheckCircle
                  v-if="submitStatus === 'success'"
                  class="w-5 h-5 text-primary-500"
                />
                <AlertCircle
                  v-else
                  class="w-5 h-5 text-red-400"
                />
                <span :class="submitStatus === 'success' ? 'text-primary-500' : 'text-red-400'">
                  {{ submitMessage }}
                </span>
                <button
                  class="ml-auto text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
                  @click="resetSubmitStatus"
                >
                  ×
                </button>
              </div>

              <form
                class="space-y-6"
                @submit.prevent="submitForm"
              >
                <!-- 基本信息 -->
                <div class="grid md:grid-cols-2 gap-6">
                  <div>
                    <label class="block text-sm font-medium mb-2">
                      姓名
                      <span class="text-red-400">*</span>
                    </label>
                    <div class="relative">
                      <User
                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400"
                      />
                      <input
                        v-model="form.name"
                        type="text"
                        required
                        class="w-full pl-12 pr-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                        placeholder="请输入您的姓名"
                      />
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium mb-2">
                      邮箱
                      <span class="text-red-400">*</span>
                    </label>
                    <div class="relative">
                      <Mail
                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400"
                      />
                      <input
                        v-model="form.email"
                        type="email"
                        required
                        class="w-full pl-12 pr-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                        placeholder="请输入您的邮箱"
                      />
                    </div>
                  </div>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                  <div>
                    <label class="block text-sm font-medium mb-2">公司名称</label>
                    <div class="relative">
                      <Building
                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400"
                      />
                      <input
                        v-model="form.company"
                        type="text"
                        class="w-full pl-12 pr-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                        placeholder="请输入公司名称"
                      />
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium mb-2">联系电话</label>
                    <div class="relative">
                      <Phone
                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400"
                      />
                      <input
                        v-model="form.phone"
                        type="tel"
                        class="w-full pl-12 pr-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                        placeholder="请输入联系电话"
                      />
                    </div>
                  </div>
                </div>

                <!-- 项目信息 -->
                <div>
                  <label class="block text-sm font-medium mb-2">项目主题</label>
                  <input
                    v-model="form.subject"
                    type="text"
                    class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                    placeholder="请简要描述您的项目"
                  />
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                  <div>
                    <label class="block text-sm font-medium mb-2">项目预算</label>
                    <select
                      v-model="form.budget"
                      class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                    >
                      <option value="">请选择预算范围</option>
                      <option
                        v-for="budget in budgetOptions"
                        :key="budget"
                        :value="budget"
                      >
                        {{ budget }}
                      </option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-sm font-medium mb-2">项目周期</label>
                    <select
                      v-model="form.timeline"
                      class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors text-gray-900 dark:text-white"
                    >
                      <option value="">请选择项目周期</option>
                      <option
                        v-for="timeline in timelineOptions"
                        :key="timeline"
                        :value="timeline"
                      >
                        {{ timeline }}
                      </option>
                    </select>
                  </div>
                </div>

                <!-- 详细需求 -->
                <div>
                  <label class="block text-sm font-medium mb-2">
                    项目详情
                    <span class="text-red-400">*</span>
                  </label>
                  <textarea
                    v-model="form.message"
                    required
                    rows="6"
                    class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:border-primary-500 focus:outline-none transition-colors resize-none text-gray-900 dark:text-white"
                    placeholder="请详细描述您的项目需求、期望功能、目标用户等信息..."
                  />
                </div>

                <!-- 提交按钮 -->
                <button
                  type="submit"
                  :disabled="isSubmitting"
                  class="w-full flex items-center justify-center gap-3 bg-gradient-to-r from-primary-400 to-primary-600 hover:from-primary-500 hover:to-primary-700 disabled:bg-gray-600 text-white disabled:text-gray-400 px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 disabled:scale-100 glow-effect"
                >
                  <Send class="w-5 h-5" />
                  <span v-if="isSubmitting">发送中...</span>
                  <span v-else>发送消息</span>
                </button>
              </form>
            </div>
          </div>

          <!-- 地图和额外信息 -->
          <div
            data-aos="fade-left"
            class="space-y-8"
          >
            <!-- 地图占位 -->
            <div
              class="bg-white/10 dark:bg-gray-800/50 rounded-xl p-8 backdrop-blur-sm border border-gray-200/20 dark:border-gray-700/50 shadow-lg"
            >
              <h3
                class="text-2xl font-bold mb-6 flex items-center gap-3 text-gray-900 dark:text-white"
              >
                <MapPin class="w-6 h-6 text-primary-500" />
                <span class="gradient-text">我们的位置</span>
              </h3>
              <div
                class="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center mb-6 border border-gray-300 dark:border-gray-600"
              >
                <div class="text-center text-gray-600 dark:text-gray-300">
                  <MapPin class="w-12 h-12 mx-auto mb-4 text-primary-500 glow-effect" />
                  <p>地图加载中...</p>
                  <p class="text-sm mt-2">北京市朝阳区望京SOHO</p>
                </div>
              </div>
              <div class="space-y-4 text-gray-600 dark:text-gray-300">
                <div class="flex items-start gap-3">
                  <MapPin class="w-5 h-5 text-primary-500 mt-0.5" />
                  <div>
                    <p class="font-medium text-gray-900 dark:text-white">详细地址</p>
                    <p class="text-sm">北京市朝阳区望京SOHO T1座 2008室</p>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <Clock class="w-5 h-5 text-primary-500 mt-0.5" />
                  <div>
                    <p class="font-medium text-gray-900 dark:text-white">营业时间</p>
                    <p class="text-sm">周一至周五 9:00-18:00</p>
                    <p class="text-sm">周末及节假日请提前预约</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 快速联系 -->
            <div
              class="bg-gradient-to-br from-primary-400/10 to-primary-600/10 p-8 rounded-2xl border border-primary-400/30"
            >
              <h3 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">快速联系</h3>
              <div class="space-y-4">
                <a
                  href="mailto:hello@firefly-studio.com"
                  class="flex items-center gap-4 p-4 bg-white/20 dark:bg-gray-900/50 rounded-lg hover:bg-white/30 dark:hover:bg-gray-900/70 transition-colors group"
                >
                  <Mail class="w-6 h-6 text-primary-500" />
                  <div>
                    <p
                      class="font-medium group-hover:text-primary-500 transition-colors text-gray-900 dark:text-white"
                    >
                      发送邮件
                    </p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">hello@firefly-studio.com</p>
                  </div>
                </a>
                <a
                  href="tel:+8613800138000"
                  class="flex items-center gap-4 p-4 bg-white/20 dark:bg-gray-900/50 rounded-lg hover:bg-white/30 dark:hover:bg-gray-900/70 transition-colors group"
                >
                  <Phone class="w-6 h-6 text-primary-500" />
                  <div>
                    <p
                      class="font-medium group-hover:text-primary-500 transition-colors text-gray-900 dark:text-white"
                    >
                      电话咨询
                    </p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">+86 138-0013-8000</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="py-20">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          class="text-center mb-16"
          data-aos="fade-up"
        >
          <h2 class="text-3xl lg:text-4xl font-bold mb-6">
            常见
            <span class="text-green-400">问题</span>
          </h2>
          <p class="text-xl text-gray-300">
            以下是客户经常询问的问题，希望能帮助您更好地了解我们的服务
          </p>
        </div>

        <div class="space-y-6">
          <div
            v-for="(faq, index) in faqs"
            :key="index"
            class="bg-gray-900/50 p-6 rounded-2xl border border-gray-800"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <h3 class="text-xl font-bold mb-4 text-green-400">
              {{ faq.question }}
            </h3>
            <p class="text-gray-300 leading-relaxed">
              {{ faq.answer }}
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
